<template>
	<view class="result">
		<!-- 考试成绩 -->
		<view class="title">考试成绩</view>
		<view class="result-header">
			{{obj.paper}}成绩
		</view>
		<view class="result-main">
			<view class="p">账号: {{obj.account}}</view>
			<view class="p">用户名: {{obj.user}}</view>
			<view class="p">分数: {{obj.score}}</view>
			<view class="p">答对: <text style="color: green;">{{right}}</text></view>
			<view class="p">对错: <text style="color: red;">{{wrong}}</text></view>
			<view class="p">结果: {{obj.isPass}}</view>
			<!-- <view class="p">用时: 00:00:00</view> -->
		</view>
		<view class="result-paper">
			<view v-for="(item,index) in obj.topics" :key="index">
				<view class="swiper-item">
					<!-- 选择题 -->
					<view class="box" v-if="item.type == 'a'">
						<!-- <view class="tit">选择题</view> -->
						<view class="q">{{index + 1}}.{{item.question}}</view>
						<view class="option">
							<view v-for="opt in 
							item.options" :key="opt.id" :class="['text',opt.checked ?(item.myAnswer != item.answer ?'wrong':'active'):'']">
								{{opt.text}}
							</view>
						</view>
						<view class="your">你的答案: {{item.myAnswer}} </view>
						<view class="right">正确答案: {{item.answer}} </view>
					</view>
					<!-- 判断题 -->
					<view class="box" v-if="item.type == 'b'">
						<!-- <view class="tit">判断题</view> -->
						<view class="q">{{index + 1}}.{{item.question}}</view>
						<view class="option">
							<view v-for="opt in item.options" :key="opt.id"
								:class="['text',opt.checked ?(item.myAnswer != item.answer ?'wrong':'active'):'']">
								{{opt.text}}
							</view>
						</view>
						<view class="your">你的答案: {{item.myAnswer}} </view>
						<view class="right">正确答案: {{item.answer}} </view>
					</view>
					<!-- 填空题 -->
					<view class="box" v-if="item.type == 'c'">
						<!-- <view class="tit">填空题</view> -->
						<view class="q">{{index + 1}}.{{item.question}}</view>
						<view class="inpbox">
							<input disabled="false" class="inp" v-model="item.myAnswer" type="text" placeholder="请输入" />
						</view>
						<view class="your">你的答案: {{item.myAnswer}} </view>
						<view class="right">正确答案: {{item.answer}} </view>
					</view>
					<!-- 简单题 -->
					<view class="box" v-if="item.type == 'd'">
						<!-- <view class="tit">简答题</view> -->
						<view class="q">{{index + 1}}.{{item.question}}</view>
						<view class="inpbox">
							<textarea disabled="false" v-model="item.myAnswer" class="textarea" placeholder="请输入你的理解"
								id="" cols="30" rows="10"></textarea>
						</view>
						<view class="your">你的答案: {{item.myAnswer}} </view>
						<view class="right">正确答案: </view>
						<view class="right">
							{{item.answer}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 创建db对象
	const db = uniCloud.database();
	// 获取 `tt_scores` 集合的引用
	const scoresCollection = db.collection('tt_scores');
	export default {
		data() {
			return {
				right: 0,
				wrong: 0,
				arr: [], // 用于渲染题目和记录用户是否作答了
				obj: { //// 记录考试成绩
					account: "",
					score: 0,
					isPass: "",
					paper: "",
					topics: [],
					total: 0
				},
			}
		},
		methods: {
			async getScoreDetailFn(id) {
				uni.showLoading({
					title: "正在加载.."
				})
				const resData = await scoresCollection.where({
					_id: id
				}).get()
				// console.log(resData);
				if (resData.result.data && resData.result.data.length != 0) {
					let obj2 = resData.result.data[0]
					this.obj.paper = obj2.paper
					this.obj.score = obj2.score
					this.obj.isPass = obj2.isPass
					this.obj.account = obj2.account
					this.obj.topics = obj2.topics
					this.obj.total = obj2.total
					this.obj.user = obj2.user
					// console.log(obj)
					obj2.topics.forEach(item => {
						if (item.answer == item.myAnswer) {
							this.right += 1;
						} else {
							this.wrong += 1;
						}
					})
				}
				uni.hideLoading();
			}
		},
		onLoad(options) {
			if (options.id) {
				let id = options.id;
				this.getScoreDetailFn(id) // 获取用户考试成绩

			}
		}
	}
</script>


<style lang="scss">
	@import "../../static/scss/variable.scss";

	.result {
		padding: $padd;
	}

	.result-main {
		padding: 20rpx 0rpx;
		border-bottom: 2px solid $theme-color;
	}

	.result-header {
		text-align: center;
		padding: 20rpx 0;
	}

	.result-paper {
		.box {
			padding: 20rpx;
			border-bottom: 2px dashed #f0f0f0;

			.tit {
				margin-bottom: 20rpx;
			}

			.q {
				font-weight: bold;
				font-size: 32rpx;
			}

			.your {
				margin-bottom: 12rpx;
			}

			.right {
				color: #1BA035;
			}

			.text {
				padding: 10rpx 30rpx;
				margin-bottom: 6rpx;
				margin-top: 6rpx;

				&.active {
					color: #1BA035
				}

				&.wrong {
					color: #FF0000
				}
			}

			.inpbox {
				margin-bottom: 10rpx;
				margin-top: 20rpx;

				.inp {
					background-color: #fff;
					border-bottom: 1px solid #ccc;
					height: 90rpx;
					padding: 0rpx 20rpx;
					box-sizing: border-box;
					width: 100%;
				}

				.textarea {
					background-color: #f0f0f0;
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>